/*导航轮播图*/
let arrImage = [
  {
    url:"",
    urlpho:"./images/index/zonglunbo1.jpg"
  },
  {
    url:"",
    urlpho:"./images/index/zonglunbo2.jpg"
  },
  {
    url:"",
    urlpho:"./images/index/zonglunbo3.jpg"
  },
  {
    url:"",
    urlpho:"./images/index/zonglunbo4.jpg"
  },
  {
    url:"",
    urlpho:"./images/index/zonglunbo5.jpg"
  }]
let swiper = new Swiper('.headshow .swiper-container', {
  effect:'fade',
  loop: true,
  allowTouchMove: false,
  autoplay: {
    delay: 2000,
    disableOnInteraction: false,
    pauseOnMouseEnter: true,
  },
  pagination: {
    el: '.headshow .swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.headshow .swiper-button-next',
    prevEl: '.headshow .swiper-button-prev',
  },
});

for(let x= 0;x<arrImage.length;x++){
  swiper.appendSlide(
    `
      <div class="swiper-slide" style="background-image:url(${arrImage[x].urlpho});background-position:center">
        <a href="" class="linkOn"></a>
      </div>
    `)
}
swiper.slideToLoop(0,0);
/*旅游攻略中infor的轮播图*/
let arrInfor = [
  {
    name:"方一舟",
    time:"8:00",
    content:`【48元特惠·富春江步道】9.5周日，12公里桐庐富春江线休闲绿道，打卡芦茨村-茆坪村-石舍村，乡野田园，徽派建筑，山环水抱，感受精致隐逸的慢生活（城市出游好去处）`,
    number:"114",
    urllianjie:"",
    urlbaoming:""
  },{
    name:"方二舟",
    time:"8:01",
    content:"【古溪线】看小桥流水人家，户外经典徒步穿越峡谷小溪、竹林瀑布、丹枫廊桥；",
    number:"184",
    urllianjie:"",
    urlbaoming:""
  },{
    name:"方三舟",
    time:"8:03",
    content:"  【九色甘南 • 精华6日】2021 拉卜楞寺-扎尕那仙女滩-若尔盖草原花湖-九曲黄河第一湾-郎木寺梵音-纳摩大峡谷-善觉部落牧民体验-西部牧场藏式体验，人间净土深度游！",
    number:"14",
    urllianjie:"",
    urlbaoming:""
  }];
let swiperMes = new Swiper('.message .swiper-container', {
  loop: true,
  direction: 'vertical',
  allowTouchMove: false,
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
    pauseOnMouseEnter: true,
  },
});
for(let x= 0 ;x<arrInfor.length;x++){
  swiperMes.appendSlide(
    `
      <div class="swiper-slide">
        今天 ${arrInfor[x].time} <a href="" class="username">${arrInfor[x].name}</a> 报名了
        <a href="${arrInfor[x].urllianjie}" class="lianjie">${arrInfor[x].content}</a> ${arrInfor[x].number}人已报名
        <a href="${arrInfor[x].urlbaoming}" class="baoming">我也要报名></a>
      </div>
    `)
}
/*旅游攻略left中strategyLunbo的轮播图*/
let arrImageStr = [
  {
    url:"",
    urlpho:"./images/index/lunbo1.jpg"
  },
  {
    url:"",
    urlpho:"./images/index/lunbo2.jpg"
  },
  {
    url:"",
    urlpho:"./images/index/lunbo3.jpg"
  },
  {
    url:"",
    urlpho:"./images/index/lunbo4.jpg"
  }];
let swiperStr = new Swiper('.strategy .left .strategyLunbo .swiper-container', {
  loop: true,
  allowTouchMove: false,
  autoplay: {
    delay: 2400,
    disableOnInteraction: false,
    pauseOnMouseEnter: true,
  },
  pagination: {
    el: '.strategy .left .strategyLunbo .swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.strategy .left .strategyLunbo .swiper-button-next',
    prevEl: '.strategy .left .strategyLunbo .swiper-button-prev',
  },
});
for(let x= 0;x<arrImageStr.length;x++){
  swiperStr.appendSlide(
    `
      <div class="swiper-slide" style="background-image:url(${arrImageStr[x].urlpho});background-position:center">
        <a href="" class="linkOn"></a>
      </div>
    `)
}
swiperStr.slideToLoop(0,0);
/*旅游攻略right*/
var arrPersonType =[
  {
    type:"侠魁",
    eng:"xiakui"
  },
  {
    type:"游飞侠",
    eng:"youfeixia"
  },
  {
    type:"亲子导师",
    eng:"qinzi"
  },
  { 
    type:"摄影高手",
    eng:"sheying"
  }]
var xiakui= [
  {
    name:"六六",
    url:"",
    urlpho:"./images/index/person1.jpg",
  },{
    name:"琪琪",
    url:"",
    urlpho:"./images/index/person2.jpg",
  },{
    name:"秀秀",
    url:"",
    urlpho:"./images/index/person3.jpg",
  },{
    name:"美美",
    url:"",
    urlpho:"./images/index/person4.jpg",
  },{
    name:"甜甜",
    url:"",
    urlpho:"./images/index/person5.jpg",
  },{
    name:"乐乐",
    url:"",
    urlpho:"./images/index/person1.jpg",
  },{
    name:"灰灰",
    url:"",
    urlpho:"./images/index/person2.jpg",
  },{
    name:"白白",
    url:"",
    urlpho:"./images/index/person3.jpg",
  },{
    name:"白白",
    url:"",
    urlpho:"./images/index/person4.jpg",
  },{
    name:"白白",
    url:"",
    urlpho:"./images/index/person5.jpg",
  },{
    name:"白白",
    url:"",
    urlpho:"./images/index/person2.jpg",
  },{
    name:"白白",
    url:"",
    urlpho:"./images/index/person1.jpg",
  }]; 
var youfeixia=[{
    name:"甜甜",
    url:"",
    urlpho:"./images/index/person5.jpg",
  },{
    name:"乐乐",
    url:"",
    urlpho:"./images/index/person1.jpg",
  },{
    name:"灰灰",
    url:"",
    urlpho:"./images/index/person2.jpg",
  },{
    name:"白白",
    url:"",
    urlpho:"./images/index/person3.jpg",
  }]
for(let x=0;x<arrPersonType.length;x++){
  let span = $(
    `
    <span class="${arrPersonType[x].eng}">${arrPersonType[x].type}</span>
    `
  );
  $(".strategy .right .type").append(span);
}
$(".strategy .right .type").append($(`<a href="">更多></a>`));
$(".strategy .right .type span:first").addClass("hov");
$(".strategy .right .type span").on("click",function(){
  $(".strategy .right .type span").removeClass("hov");
  $(this).addClass("hov");
  $(".strategy .right .pho").text("");
  var y= $(this).attr("class").slice(0,-4);
  console.log(y)
  if(y=="youfeixia"){
    for(let x=0;x<youfeixia.length;x++){
      $(".strategy .right .pho").append($(
        `
          <a href="" class="bgi" style="background-image:url(${youfeixia[x].urlpho});">
            <div class='bgc'>
              <div class="txt">${youfeixia[x].name}</div>
              <div class="btn">+加关注</div>
            </div>
          </a>
        `))
    }
  }
  if(y=="xiakui"){
    for(let x=0;x<xiakui.length;x++){
      $(".strategy .right .pho").append($(
        `
          <a href="" class="bgi" style="background-image:url(${xiakui[x].urlpho});">
            <div class='bgc'>
              <div class="txt">${xiakui[x].name}</div>
              <div class="btn">+加关注</div>
            </div>
          </a>
        `))
    }
  }
})
for(let x=0;x<xiakui.length;x++){
  $(".strategy .right .pho").append($(
    `
      <a href="" class="bgi" style="background-image:url(${xiakui[x].urlpho});">
        <div class='bgc'>
          <div class="txt">${xiakui[x].name}</div>
          <div class="btn">+加关注</div>
        </div>
      </a>
    `))
}
$(".strategy .right .pho").on("mouseenter",".bgi",function(){
  $(this).find(".bgc").css("display","block");
})
$(".strategy .right .pho").on("mouseleave",".bgi",function(){
  $(this).find(".bgc").css("display","none");
})
/*特惠路线中切换图片*/
let country = [
  {
    money:"￥2750",
    where:"北京出发",
    introduce:"闽南全景 • 中秋国庆特别企划]土楼烟花赏&amp;“土著”中秋博饼活动，迷失鼓浪屿/开元寺/惠女换服体验/夜宿土楼上，闽南3地5天4晚深度小众游！",
    urlpho:"./images/index/js1.jpg"
  },{
    money:"￥2700",
    where:"上海出发",
    introduce:"闽南全景 • 中秋国庆特别企划]土楼烟花赏&amp;“土著”中秋博饼活动，迷失鼓浪屿/开元寺/惠女换服体验/夜宿土楼上，闽南3地5天4晚深度小众游！",
    urlpho:"./images/index/js2.jpg"
  },{
    money:"￥4750",
    where:"天津出发",
    introduce:"闽南全景 • 中秋国庆特别企划]土楼烟花赏&amp;“土著”中秋博饼活动，迷失鼓浪屿/开元寺/惠女换服体验/夜宿土楼上，闽南3地5天4晚深度小众游！",
    urlpho:"./images/index/js1.jpg"
  },{
    money:"￥2050",
    where:"青岛出发",
    introduce:"闽南全景 • 中秋国庆特别企划]土楼烟花赏&amp;“土著”中秋博饼活动，迷失鼓浪屿/开元寺/惠女换服体验/夜宿土楼上，闽南3地5天4晚深度小众游！",
    urlpho:"./images/index/js2.jpg"
  },{
    money:"￥2740",
    where:"海南出发",
    introduce:"闽南全景 • 中秋国庆特别企划]土楼烟花赏&amp;“土著”中秋博饼活动，迷失鼓浪屿/开元寺/惠女换服体验/夜宿土楼上，闽南3地5天4晚深度小众游！",
    urlpho:"./images/index/js1.jpg"
  }];
let special = [
  {
    money:"￥2880",
    where:"北京出发",
    introduce:"闽南全景 • 中秋国庆特别企划]土楼烟花赏&amp;“土著”中秋博饼活动，迷失鼓浪屿/开元寺/惠女换服体验/夜宿土楼上，闽南3地5天4晚深度小众游！",
    urlpho:"./images/index/js3.jpg"
  },
  {
    money:"￥2740",
    where:"南京出发",
    introduce:"闽南全景 • 中秋国庆特别企划]土楼烟花赏&amp;“土著”中秋博饼活动，迷失鼓浪屿/开元寺/惠女换服体验/夜宿土楼上，闽南3地5天4晚深度小众游！",
    urlpho:"./images/index/js4.jpg"
  },{
    money:"￥2890",
    where:"上海出发",
    introduce:"闽南全景 • 中秋国庆特别企划]土楼烟花赏&amp;“土著”中秋博饼活动，迷失鼓浪屿/开元寺/惠女换服体验/夜宿土楼上，闽南3地5天4晚深度小众游！",
    urlpho:"./images/index/js3.jpg"
  }];
let xinpin = [
  {
    money:"￥2880",
    where:"北京出发",
    introduce:"闽南全景 • 中秋国庆特别企划]土楼烟花赏&amp;“土著”中秋博饼活动，迷失鼓浪屿/开元寺/惠女换服体验/夜宿土楼上，闽南3地5天4晚深度小众游！",
    urlpho:"./images/index/js3.jpg"
  }];
$(".specialLine .navList div:first").data("type","country");
$(".specialLine .navList div:eq(1)").data("type","special");
$(".specialLine .navList div:eq(2)").data("type","xinpin");
// 特惠路线中滑动效果
let slide = function(){
  $(".specialLine .tuijian .item:first").css("flex-grow","1");
  $(".specialLine .tuijian .item:first .touming").css("opacity","0");
  $(".specialLine .tuijian .item:first .priceAndIntroduce").css("display","block");
  $(".specialLine .tuijian .item:first .apply").css("display","block");
  $(".specialLine .tuijian .item:first .start").css("display","none");
  $(".specialLine .tuijian .item").mouseenter(function(){
    $(".item").stop().animate({"flex-grow":"0"},500);
    $(this).stop().animate({"flex-grow":"1"},500,function(){
      $(this).find(".apply").css("display","block");
    });
    $(".specialLine .tuijian .item .touming").stop().animate({"opacity":"1"},500);
    $(this).find(".touming").stop().animate({"opacity":"0"},500);
    $(".specialLine .tuijian .item .priceAndIntroduce").css("display","none");
    $(this).find(".priceAndIntroduce").css("display","block");
    $(".specialLine .tuijian .item .apply").css("display","none");
    $(".specialLine .tuijian .item .start").css("display","block");
    $(this).find(".start").css("display","none");
  })
}
let widthSize = function(n){
  if(n==5){
    $(".specialLine .tuijian .item").css("width","166px")
  }else if(n==3){
    $(".specialLine .tuijian .item").css("width","332px")
  }else if(n==1){
    $(".specialLine .tuijian .item").css("width","535px");
    $(".specialLine .tuijian .item .apply").css("display","block");
    $(".specialLine .tuijian .item .start").css("display","none");
    $(".specialLine .tuijian .item .priceAndIntroduce").css("display","block");
    $(".specialLine .tuijian .item .touming").css("opacity","0");
  }
}
let xunhuan = function(){
  for(let x=0;x<country.length;x++){
    let item = $(
      `
      <div class="item" style="background-image:url(${country[x].urlpho})">
        <a href=""class="baomingMethod">
          <div class="touming"></div>
          <div class="priceAndIntroduce">
            <div class="price">
              <div class="money">${country[x].money}</div>
              <div class="hrline"></div>
              <div class="where">${country[x].where}</div>
            </div>
            <div class="introduce">
              ${country[x].introduce}
            </div>
          </div>
        </a>
        <div class="hot">HOT</div>
        <a href="" class="apply">立即报名</a>
        <div class="start">${country[x].where}</div>
      </div>
      `
      );
    $(".specialLine .tuijian").append(item);
  }
}
xunhuan();
widthSize(country.length);
slide();
$(".specialLine .navList div").on("click",function(){
  $(".specialLine .navList div").removeClass("hov");
  $(this).attr("class","hov");
  let w =$(this).data("type");
  $(".specialLine .tuijian").empty();
  if(w=="country"){
    xunhuan();
    widthSize(country.length);
    slide();
  }else if(w=="special"){
    for(let x=0;x<special.length;x++){
      let item = $(
        `
        <div class="item" style="background-image:url(${special[x].urlpho})">
          <a href=""class="baomingMethod">
            <div class="touming"></div>
            <div class="priceAndIntroduce">
              <div class="price">
                <div class="money">${special[x].money}</div>
                <div class="hrline"></div>
                <div class="where">${special[x].where}</div>
              </div>
              <div class="introduce">
                ${special[x].introduce}
              </div>
            </div>
          </a>
          <div class="hot">HOT</div>
          <a href="" class="apply">立即报名</a>
          <div class="start">${special[x].where}</div>
        </div>
        `
        );
      $(".specialLine .tuijian").append(item);
    }
    widthSize(special.length);
    slide();
  }else if(w=="xinpin"){
    for(let x=0;x<xinpin.length;x++){
      let item = $(
        `
        <div class="item" style="background-image:url(${xinpin[x].urlpho})">
          <a href=""class="baomingMethod">
            <div class="touming"></div>
            <div class="priceAndIntroduce">
              <div class="price">
                <div class="money">${xinpin[x].money}</div>
                <div class="hrline"></div>
                <div class="where">${xinpin[x].where}</div>
              </div>
              <div class="introduce">
                ${xinpin[x].introduce}
              </div>
            </div>
          </a>
          <div class="hot">HOT</div>
          <a href="" class="apply">立即报名</a>
          <div class="start">${xinpin[x].where}</div>
        </div>
        `
        );
      $(".specialLine .tuijian").append(item);
      widthSize(xinpin.length);
    }
  }
})
/*周边短途游*/
let zbdestination =["武功山","青岛","泰山","太湖","九峰山","太湖"];
let zbtheme = ["city Wark","瑜伽旅行"];
let zbday = ["1日游","2日游","3日游","3日及以上"];
for(let x=0;x<zbdestination.length;x++){
  let li = $(
    `
      <li><a href="">·${zbdestination[x]}</a></li>
    `
    )
  $(".zhoubian .left .sort .destination").append(li);
}
for(let x=0;x<zbtheme.length;x++){
  let li = $(
    `
      <li><a href="">·${zbtheme[x]}</a></li>
    `
    )
  $(".zhoubian .left .sort .theme").append(li);
}
for(let x=0;x<zbday.length;x++){
  let li = $(
    `
      <li><a href="">·${zbday[x]}</a></li>
    `
    )
  $(".zhoubian .left .sort .day").append(li);
}





$(".zhoubian .right .nav .city div:first").addClass("hov");
$(".zhoubian .right .nav .city div").on("click",function(){
  $(".zhoubian .right .nav .city div").removeClass("hov");
  $(this).addClass("hov");
})
/*周边短途游轮播图*/
let arrRightCity = [
  {
    url:"",
    urlpho:"./images/index/lunboright.jpg",
    introduce:"[仪式感系列·领证跟拍]2021全年，生活要有仪式感；一生一次，一起嫁给最幸福的人，让这个特殊难忘的日子，一生难忘！",
    money:"2740",
    number:"125"
  },
  {
    url:"",
    urlpho:"./images/index/lunboright2.jpg",
    introduce:"[仪式感系列·领证跟拍]2021全年，生活要有仪式感；一生一次，一起嫁给最幸福的人，让这个特殊难忘的日子，一生难忘！",
    money:"2840",
    number:"15"
  },
  {
    url:"",
    urlpho:"./images/index/lunboright3.jpg",
    introduce:"[仪式感系列·领证跟拍]2021全年，生活要有仪式感；一生一次，一起嫁给最幸福的人，让这个特殊难忘的日子，一生难忘！",
    money:"1440",
    number:"190"
  }];
let swiperRig = new Swiper('.zhoubian .right .contentCity .lunbo .swiper-container', {
  loop: true,
  allowTouchMove: false,
  autoplay: {
    delay: 2400,
    disableOnInteraction: false,
    pauseOnMouseEnter: true,
  },
  pagination: {
    el: '.zhoubian .right .contentCity .lunbo .swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.zhoubian .right .contentCity .lunbo .swiper-button-next',
    prevEl: '.zhoubian .right .contentCity .lunbo .swiper-button-prev',
  },
});
for(let x= 0;x<arrRightCity.length;x++){
  swiperRig.appendSlide(
    `
      <div class="swiper-slide" style="background-image:url(${arrRightCity[x].urlpho});background-position:center">
        <a href="" class="linkOn">
          <div class="label">
            <div class="labelCity">重庆</div>
            <div class="labelDay">1天</div>
          </div>
          <div class="box">
            <div class="introduce">${arrRightCity[x].introduce}</div>
            <div class="money"><span>￥</span>${arrRightCity[x].money}<span> 元起</span></div>
            <div class="number">${arrRightCity[x].number}人已报名</div>
          </div>
        </a>
      </div>
    `)
}
swiperRig.slideToLoop(0,0);
/*周边短途游处的分割线图片*/
var arrHr =["./images/index/hr1.jpg","./images/index/hr2.jpeg"];
for(let x= 0; x<arrHr.length;x++ ){
  let divHr = $(
    `
    <a href="" class="divide" style="background-image:url(${arrHr[x]})"></a>

    `
    )
  $(".hrlineLogoOne .container").append(divHr);
}
/*游记活动*/
let arrTAcity=[
  {
    city:"精华",
    eng:"jinghua"
  },{
    city:"新疆",
    eng:"xinjiang"
  },{
    city:"西北",
    eng:"xibei"
  },{
    city:"内蒙",
    eng:"neimeng"
  },{
    city:"四川",
    eng:"sichuan"
  }];
for(let x= 0;x<arrTAcity.length;x++){
  let city =$(
    `
      <li><a class="${arrTAcity[x].eng}">${arrTAcity[x].city}</a></li>

    `
    )
  $(".travelActive .TAcity").append(city);
}
$(".travelActive .TAcity>li:first a").addClass("hov");
$(".travelActive .TAcity>li a").on("click",function(){
  console.log(1)
  $(".travelActive .TAcity>li a").removeClass("hov");
  $(this).addClass("hov");
})
let arrTAcontent=[
  {
    username:"小熊",
    url:"",
    urlpho:"./images/index/youji1.jpg",
    time:"2021-09-05",
    txt:"又见南京 | 看不完的风景，听不完的历史，南京的惊喜，还在继续",
  },
  {
    username:"小灰",
    url:"",
    urlpho:"./images/index/youji2.jpg",
    time:"2021-08-05",
    txt:"又见南京 | 看不完的风景，听不完的历史，南京的惊喜，还在继续",
  },
  {
    username:"小雄",
    url:"",
    urlpho:"./images/index/youji2.jpg",
    time:"2021-08-15",
    txt:"又见南京 | 看不完的风景，听不完的历史，南京的惊喜，还在继续",
  },
  {
    username:"小灰",
    url:"",
    urlpho:"./images/index/youji2.jpg",
    time:"2021-08-05",
    txt:"又见南京 | 看不完的风景，听不完的历史，南京的惊喜，还在继续",
  },
  {
    username:"大灰",
    url:"",
    urlpho:"./images/index/youji1.jpg",
    time:"2021-08-05",
    txt:"又见南京 | 看不完的风景，听不完的历史，南京的惊喜，还在继续",
  },
  {
    username:"大灰",
    url:"",
    urlpho:"./images/index/youji2.jpg",
    time:"2021-08-05",
    txt:"又见南京 | 看不完的风景，听不完的历史，南京的惊喜，还在继续",
  },
  {
    username:"大灰",
    url:"",
    urlpho:"./images/index/youji1.jpg",
    time:"2021-08-05",
    txt:"又见南京 | 看不完的风景，听不完的历史，南京的惊喜，还在继续",
  },
  {
    username:"大灰",
    url:"",
    urlpho:"./images/index/youji2.jpg",
    time:"2021-08-05",
    txt:"又见南京 | 看不完的风景，听不完的历史，南京的惊喜，还在继续",
  }];
for(let x = 0;x<arrTAcontent.length;x++){
  let a = $(
    `
      <a href="${arrTAcontent[x].url}">
        <div class="TApho" style="background-image:url(${arrTAcontent[x].urlpho})"></div>
        <div class="TAtxt">
          <div class="TAintro">${arrTAcontent[x].txt}</div>
          <div class="TAtime">${arrTAcontent[x].time} by <span>${arrTAcontent[x].username}</span></div>
        </div>
      </a>
    `
    )
  $(".travelActive .TAcontent").prepend(a);
}
